<template>
	<view class="container" >
		<z-paging ref="paging" :auto="false" show-refresher-when-reload use-chat-record-mode show-chat-loading-when-reload
			safe-area-inset-bottom auto-to-bottom-when-chat v-model="state.list" @query="queryList" bottom-bg-color="#ffffff" empty-view-text="" empty-view-img="" hide-empty-view>

			<template #top>
				<view class="top">
					<view>
						<u-navbar :border-bottom="false" back-text="" title="">
							<template v-slot:default>
								<view class="nav">
									<image :src="navIcon" mode=""></image>
								</view>
							</template>
						</u-navbar>
					</view>
					
					<view class="hot-card" v-if="state.list.length == 0 && userinfo.userId != -1 && state.checkedType == -1 && state.hots.length > 0">
						<text class="hot-card-title">你可以问我任何问题，如：</text>
						<view class="hot-card-list" v-for="(item,index) in state.hots" :key="index" @click="handleHotSend(item)">
							<view class="hot-card-item">
								<text>{{item}}</text>
							</view>
						</view>
					</view>
				</view>
			</template>

			<view v-for="(item,index) in state.list" :key="index" class="item">
				<view style="transform: scaleY(-1);">
					<chat-ai-item v-model:checkedType="state.checkedType" :item="item" :isPlay="isPlay" @regenerate="handleRegenerate(item)"
						@play="handlePlay(item)"></chat-ai-item>
				</view>
			</view>

			<template #bottom>
				<chat-ai-input ref="chatai" :type="type" :fengge="fengge" :changdu="changdu" v-model="sendText"  v-model:checkedTwoType="wordTypeState.checked"
					v-model:checkedTwoTypeId="wordTypeState.checkedId" v-model:checkedType="state.checkedType"
					:types="state.types" :disabled="state.isAnswering" @send="handleSend" @checked="handleChecked"
					@wordChoice="handleWordChoice" @wordType="handleWordType" @wordStyle="handleWordStyle" @wordLength="handlewordLength"></chat-ai-input>
			</template>
		</z-paging>

		<!-- 单词短文：选词 -->
		<u-popup v-model="state.showWordChoice" mode="bottom" background-color="#ffffff" border-radius="40">
			<view class="word-choice">
				<z-paging :show-scrollbar="false" show-refresher-when-reload height="1284rpx" safe-area-inset-bottom
					bottom-bg-color="#ffffff" :fixed="false" ref="wordChoice" v-model="wordChoiceState.list"
					@query="queryWordChoice">
					<template #top>
						<view class="word-choice-top">
							<view class="word-choice-wordchoice ">
								<text class="bold">选词</text>
								<image @click="state.showWordChoice=false;" mode="widthFix" src="/static/closes.png" class="image width64"></image>
								<!-- <u-icon @click="state.showWordChoice=false;" size="40" name="close"></u-icon> -->
							</view>
							<view class="word-choice-search">
								<u-search @search="usearch" search-icon-color="#FD2F55" shape="square" bg-color="#F3F5F7" :show-action="false" height="80"
									placeholder="请输入要查询的单词、词根" v-model="wordChoiceState.search"></u-search>
							</view>
							<view v-if="wordChoiceState.loading" class="word-choice-subsection">
								<u-subsection @change="changeWordChoiceTabs" height="99" bg-color="#F3F5F7" button-color="#ffffff"
									mode="button" :list="wordChoiceState.tabs" v-model="wordChoiceState.currentTab"></u-subsection>
							</view>
						</view>
					</template>
					<view  > 
						
					<view v-for="(item,index) in wordChoiceState.list" :key="index"  class="word-choice-item">
						<template v-if="wordChoiceState.currentTab == 0">
							<view class="word-choice-item-title">
								<text class="word-choice-item-title-name">{{item.root}}</text>
								<view 
									:class="[numk.some(i => i.rootId === item.rootId) ? 'word-choice-item-title-action-active' : 'word-choice-item-title-action-no']"
									class="word-choice-item-title-action" @click="handleSelectWord(item)">
									<text  v-if="numk.some(i => i.rootId === item.rootId)">已添加1</text>
									<view v-else class=" colorfff">添加2</view>
								</view>
							</view>
							<u-collapse >
								<u-collapse-item-new arrow="false" title="">
									<template  v-slot:right="{isShow}">
										
										<view class="word-choice-item-tip flex-a-i">
										{{isShow ? '收起' : '展开'}}
										<image v-if="isShow" mode="widthFix" src="/static/xiangtop.png" class="flex image width32"></image>
										<image v-else mode="widthFix" src="/static/xiangxia.png" class="flex image width32"></image>
										</view>
									</template>
									<template v-slot:title>
										<text class="word-choice-item-title">{{item.meaning}}</text>
									</template>
									<view class="word-choice-item-tags">
										<view v-for="(root,rootI) in item.words" :key="index" class="word-choice-item-tags-item">
											<text>{{root}}</text>
										</view>
									</view>
								</u-collapse-item-new>
							</u-collapse>
						</template>

						<template v-if="wordChoiceState.currentTab == 1">
							<view class="word-choice-item-title">
								<text class="word-choice-item-title-name">{{item.word}}</text>

								<view class="word-choice-item-title-actions">
									<view @click="voice(item.pronounce)" style="background: #F3F5F7;" class="word-choice-item-title-action word-choice-item-title-action-no u-m-r-10">
										<!-- <u-icon size="35" color="#FD2F55" name="play-circle"></u-icon> -->
										<image mode="widthFix" src="/static/yuyin.png" class="flex image width36"></image>
										
									</view>
									<view 
										:class="[numk.some(i => i.wordId === item.wordId) ? 'word-choice-item-title-action-active' : 'word-choice-item-title-action-no']"
										class="word-choice-item-title-action" @click="handleSelectWord(item)">
										<text v-if="numk.some(i => i.wordId === item.wordId)">已添加</text>
										<text v-else style="color:#fff;">添加</text>
									</view>
								</view>
							</view>
							<view class="word-choice-item-translation">
								<text>n.{{item.paraphrase}}</text>
							</view>
						</template>

					</view>
					</view>

					<template #bottom>
						<view class="word-choice-bottom">
							<view  class="word-choice-tags">
								<text class="word-choice-tags-add">已添加：</text>
								<template v-if="wordChoiceState.currentTab == 0">
									<scroll-view scroll-y style="max-height:210rpx">
										<view  class="word-choice-tags-list" v-for="(item,index) in numk" :key="index">
											<view class="word-choice-tags-item" v-for="(t,ti) in item.words">
												<!-- <text>{{t}}</text> -->
												<view class="flex-a-i colorFD2F55">{{t}}<image @click="tapdelci(index,ti)" mode="widthFix" src="/static/cici.png" class="flex image width32 ml5"></image>
												</view>
											</view>
										</view>
									</scroll-view>
								</template>
								<template v-if="wordChoiceState.currentTab == 1">
									
									<scroll-view scroll-y style="max-height:210rpx">
										<view class="flex flex-wrap">
											<view class="word-choice-tags-item " v-for="(item,index) in numk" :key="index">
												<view class="flex-a-i colorFD2F55">{{item.word}}<image @click="tapdel(index)" mode="widthFix" src="/static/cici.png" class="flex image width32 ml5"></image>
												</view>
											</view>
										</view>
								
									
									</scroll-view>
									
								</template>
							</view>
							<view class="word-choice-confirm" @click="handleConfirmSearchWordChoice">
								<text>确定</text>
							</view>
						</view>
					</template>
				</z-paging>
			</view>
		</u-popup>
		<!-- 单词短文：选择类型 -->
		<u-picker mode="selector" v-model="wordTypeState.show" :default-selector="[0]" :range="wordTypeState.list"
			range-key="name" @confirm="handleWordTypeConfirm"></u-picker>
			<!-- 单词短文：写作风格 -->
			<u-picker mode="selector" v-model="wordStyleState.show" :default-selector="[0]" :range="wordStyleState.list"
				range-key="styleName" @confirm="handleWordStyleConfirm"></u-picker>
			<!-- 单词短文：长度 -->
			<u-picker mode="selector"  v-model="wordLengthState.show" :default-selector="[0]" :range="wordLengthState.list"
				range-key="styleName" @confirm="handlewordLengthConfirm"></u-picker>
	</view>
</template>

<script setup>
	import {
		reactive,
		onMounted,
		ref,
		getCurrentInstance,
		nextTick 
	} from 'vue';
	const {proxy} = getCurrentInstance()
	import {
		onLoad,
		onUnload,
		onReady
	} from "@dcloudio/uni-app"
	import {
		aiAddSessionMode,
		aiSessionMessages,
		aiSendMessage,
		aiTTS,
		aiHots,
		aiQuerys
	} from "@/api/ai.js"
	import ws from "@/utils/ws.js"
	import config from "@/config/index.js"

	const fengge =  ref(null)
	
	const changdu =  ref(null)

	const paging = ref(null)
	const wordChoice = ref(null)
	const type = ref()
	const state = reactive({
		list: [],
		checkedType: -1,
		types: [{
				icon: "/static/icons/i_1.png",
				selectIcon: "/static/icons/i_1_on.png",
				name: "作文批改",
				placeholder: "请输入你要批改的作文",
				navIcon: "/static/icons/i_1_nav.png",
				mode: "TUTOR"
			},
			{
				icon: "/static/icons/i_2.png",
				selectIcon: "/static/icons/i_2_on.png",
				name: "拍照解题",
				placeholder: "请输入你的问题",
				navIcon: "/static/icons/i_2_nav.png",
				mode: "GRAMMAR_CHECK"
			},
			{
				icon: "/static/icons/i_3.png",
				selectIcon: "/static/icons/i_3_on.png",
				name: "口语练习",
				placeholder: "请输入你的问题",
				navIcon: "/static/icons/i_3_nav.png",
				mode: "SPEAKING"
			},
			{
				icon: "/static/icons/i_4.png",
				selectIcon: "/static/icons/i_4_on.png",
				name: "单词短文",
				placeholder: "请输入小说包含的单词，以逗号隔开。",
				navIcon: "/static/icons/i_4_nav.png",
				mode: "VOCABULARY"
			}
		],
		isAnswering: false,
		showWordChoice: false,
		isStop: false,
		hots: []
	})
	

	const wordChoiceState = reactive({
		list: [],
		search: "",
		selects: [],
		tabs: [{
				name: "词根"
			},
			{
				name: "单词"
			}
		],
		currentTab: 0,
		loading: false
	})

	const wordTypeState = reactive({
		list: [{
				name: "词根小说",
				id: 1
			},
			{
				name: "单词/词根图片",
				id: 2
			},
			{
				name: "英文笑话",
				id: 3
			},
			{
				name: "词汇关系",
				id: 4
			},
			{
				name: "双语例句",
				id: 5
			}
		],
		show: false,
		checked: "选择类型",
		checkedId: 99
	})
	const wordStyleState = reactive({
		show: false,
		list: [],
		checked: ""
	})
	const wordLengthState = reactive({
		show: false,
		list: [],
		checked: ""
	})
	
	let selects = ref([])
	let numk = ref([])
	let navIcon = ref("")
	let sendText = ref("") 
	let items = ref(null) 
	
	
	let isPlay = ref(false)
	let innerAudioContext = ref(null)
	let page=ref(1)

	let userinfo = reactive({
		title: "",
		userId: -1,
		mode: ""
	})

	let session = reactive({
		info: {}
	})

	const connectWs = () => {
		ws.connect(userinfo.userId).then((res) => {
			 
			paging.value.reload() 
			
			
				ws.on('status', (data) => {
					if (data.status == 'connected') {
						// paging.value.reload()
					}
				})
			
			
			// 接收自己的识别消息
			ws.on('ocr_response', (data) => {
				if (data && data.content) {
					state.list[1].content = data.content
					state.list[1].status = 'completed'
				}
			})
			// 接收AI响应消息
			ws.on('ai_response', (data) => {
							if(state.list[0].role == 1){
								paging.value.addChatRecordData({
									content: '思考中...',
									role: config.ROLE_AI,
									status: "loading",
									messageType: config.MESSAGE_TYPE_TEXT
								})
							}
							nextTick(() => {
								if (data && data.content) {
									let currentAnswerStr = '';
									state.list[0].status = 1
									streamTextAsync(data.content, (char) => {
										currentAnswerStr += char;
										state.list[0].content = currentAnswerStr;
										if (currentAnswerStr.length === data.content.length) {
											state.isAnswering = false;
										}
									}, 15)
								}
							})
						})
			// ws.on('ai_response', (data) => {
			// 	if (data && data.content) {
			// 		let currentAnswerStr = '';
			// 		state.list[0].status = 1
			// 		streamTextAsync(data.content, (char) => {
			// 			currentAnswerStr += char;
			// 			state.list[0].content = currentAnswerStr;
			// 			if (currentAnswerStr.length === data.content.length) {
			// 				state.isAnswering = false;
			// 			}
			// 		}, 15)
			// 	}
			// })
		}).catch((err) => {
			console.log("连接Websocket失败", err)
			state.isAnswering = false;
		})
	}


	// 获取当前会话消息记录
	const queryList = async (page, size) => {
		try {
			if (state.checkedType == -1) {
				userinfo.title = "通用"
				userinfo.mode = "GENERAL"
			} else {
				userinfo.title = state.types[state.checkedType].name
				userinfo.mode = state.types[state.checkedType].mode
			}
			// 创建会话/获取已有会话
			let res = await aiAddSessionMode(userinfo)
			session.info = res.data
			// 获取会话消息列表
			let list = await aiSessionMessages(session.info.id, {
				page,
				size
			})
			paging.value.complete(list.data.content)
		} catch (error) {
			paging.value.complete(false)
		}
	}
	
	const getlistessay = () =>{
		
	}
	const usearch = (e) =>{
		wordChoiceState.search = e
		page.value=1
		queryWordChoice()
	}
	// 获取词根/单词列表
	const queryWordChoice = (pageNo, pageSize) => {
		if(pageNo){
			page.value=pageNo
		}
		
		try {
			if (wordChoiceState.currentTab == 0) {
				proxy.http('/api/essay/list',{
					type:2,
					entry:wordChoiceState.search,
					pageSize:30,
					pageNo:page.value
				},'post').then(res=>{
					wordChoice.value.complete(res.data.rootDtoList)
			 
				})
				
			} else {
				proxy.http('/api/essay/list',{
					type:1,
					entry:wordChoiceState.search,
					pageSize:30,
					pageNo:page.value
				},'post').then(res=>{
					
					wordChoice.value.complete(res.data.wordDtoList)
				})
				
				// wordChoice.value.complete([{
				// 	name: "Word3",
				// 	type: 2,
				// 	id: 1,
				// 	meaning: "专家；权威；有影响的人物"
				// }])
				
			}
		} catch (error) {
			wordChoice.value.complete(false)
		}
	}

	let stopResolve;
	const stopPromise = () =>
		new Promise(res => (stopResolve = res));
	const streamTextAsync = async (text, callback, interval = 150) => {
		for (const char of text) {
			if (!state.isStop) {
				callback(char); // 逐个返回字符
				await Promise.race([
					new Promise(r => setTimeout(r, interval)),
					stopPromise()
				]);
			} else {
				state.isAnswering = false;
				state.isStop = false;
				break;
			}
		}
	}

	// 发送消息
	const handleSend = (data) => {
		console.log(data,"yyyy")
		// 如果在回答中，不允许发送新的消息，避免数据错乱
		if (state.isAnswering) {
			uni.showModal({
				title: "提示",
				content: "当前还在回答中，是否要取消？",
				cancelText: "点错了",
				confirmText: "是",
				success: (res) => {
					if (res.confirm) {
						state.isAnswering = false;
						state.isStop = true;
						if (state.list[0].status == 'loading') {
							state.list[0].content = "当前回答被终止"
							state.list[0].status = 1
						}
					}
				},
				fail: (err) => {
					console.log(err)
				}
			})
			return;
		}


		if (data.content.length == 0 && data.messageType == config.MESSAGE_TYPE_TEXT) {
			uni.showToast({duration: 2000,
				title: "内容不能为空",
				icon: "none"
			})
			return
		}

		if (data.content.length == 0 && data.messageType == config.MESSAGE_TYPE_WORD) {
			uni.showToast({duration: 2000,
				title: "单词不能为空",
				icon: "none"
			})
			return
		}

		let params = {
			...data,
			conversationId: session.info.id,
			userId: userinfo.userId,
			role: config.ROLE_MY,
			status: "completed"
		}
		if (data.messageType == config.MESSAGE_TYPE_AUDIO) {
			params.status = 'loading'
		}
		if(data.messageType == 5 && wordStyleState.checked.length > 0){
			params.prompt = wordStyleState.checked
		}else{
			params.prompt = ""
		}
		if(data.messageType == 5 && wordLengthState.checked.length > 0){
			params.prompt += wordLengthState.checked
		}else{
			params.prompt = ""
		}
		paging.value.addChatRecordData(params)
		aiSendMessage(params).then((response) => {
			if (response.code == 200) {
				state.isAnswering = true;
				paging.value.addChatRecordData({
					content: '思考中...',
					role: config.ROLE_AI,
					status: "loading",
					messageType: config.MESSAGE_TYPE_TEXT
				})
			}
		}).catch((error) => {
			uni.showToast({duration: 2000,
				title: error.errMsg || "发送失败",
				icon: "none"
			})
		}).finally(() => {
			sendText.value = ""
		})
	}
	// 热词搜索
	const handleHotSend = (item) => {
		handleSend({
			messageType: config.MESSAGE_TYPE_TEXT,
			content: item,
			url:"",
			isocr:false
		})
	}

	// 选择发布类型
	const handleChecked = (item) => {
		if (state.isAnswering) {
			uni.showModal({
				title: "提示",
				content: "当前还在回答中，是否要取消？",
				cancelText: "点错了",
				confirmText: "是",
				success: (res) => {
					if (res.confirm) {
						state.isAnswering = false;
						state.isStop = true;
					} else {

					}
				},
				fail: (err) => {
					console.log(err)
				}
			})
			return;
		}
		navIcon.value = item.navIcon
		paging.value.reload()
	}
	const tapdel = (index) =>{
		wordChoiceState.selects.splice(index,1)
	}
	const tapdelci = (index,ti) =>{ 
		numk.value[index].words.splice(ti,1)
		
		console.log(numk.value)
		proxy.$forceUpdate()
		
		// wordChoiceState.selects[index].words.splice(ti,1)
	}

	// 选词tab切换
	const changeWordChoiceTabs = (index) => {
		wordChoiceState.selects = []
		wordChoice.value.reload()
	}
	// 选词弹窗
	const handleWordChoice = () => {
		state.showWordChoice = true;
		setTimeout(() => {
			wordChoiceState.loading = true
		}, 500)
	}
	
	
	// 选词添加/取消
	const handleSelectWord = (rows) => {
		
		let arow = JSON.stringify(rows)
		let row = JSON.parse(arow)
		
		
		const inxdx = numk.value.findIndex(item => (item.rootId?item.rootId:item.wordId) == (row.rootId?row.rootId:row.wordId))
		inxdx > -1 ? numk.value.splice(inxdx, 1):numk.value.push(row)
		
		
		// if(numk>20){
		// 	proxy.toast('至多输入20个单词')
		// 	return
		// }
		
		
		// const idx = wordChoiceState.selects.findIndex(item => (item.rootId?item.rootId:item.wordId) == (row.rootId?row.rootId:row.wordId))
		// idx > -1 ?
		// wordChoiceState.selects.splice(idx, 1) // 删除
		// :
		// wordChoiceState.selects.push(row) // 添加完整对象
		
	}
	
	const chatai=ref(null)
	// 搜索词根/单词
	const handleConfirmSearchWordChoice = () => {
		
		if(!wordChoiceState.selects.length){
			proxy.toast('请先添加')
			return
		}
		var str =''
		if(wordChoiceState.currentTab == 1){
			wordChoiceState.selects.map(items=>{
				str+=items.word+','
			})
		}else{
			wordChoiceState.selects.map(items=>{
				items.words.map(item=>{
					str+=item+','
				})
			})
		}
		 
		state.showWordChoice = false
	 
		chatai.value.setinnerVal(str)
	}
	// 重新生成
	const handleRegenerate = (item) => {
		handleSend({
			messageType: state.list[1].messageType,
			content: state.list[1].content,
			url: state.list[1].url || "",
			isocr: state.list[1].isocr || false,
			vocabularyType: state.list[1].vocabularyType,
		})
	}

	const handleWordType = () => {
		wordTypeState.show = true;
	}
	const handleWordTypeConfirm = (val) => {
		wordTypeState.checked = wordTypeState.list[val[0]].name
		wordTypeState.checkedId = wordTypeState.list[val[0]].id
	}
	const handleWordStyle = () => {
		wordStyleState.show = true;
	}
	const handleWordStyleConfirm = (val) => {
		wordStyleState.checked = wordStyleState.list[val[0]].styleDesc
		fengge.value = wordStyleState.list[val[0]].styleName
	}
	const handlewordLength = () => {
		wordLengthState.show = true;
	}
	const handlewordLengthConfirm = (val) => {
		wordLengthState.checked = wordLengthState.list[val[0]].styleDesc
		changdu.value = wordLengthState.list[val[0]].styleName
		
		console.log(wordLengthState.checked)
	}
	// 播放音频/录音
	const handlePlay = async (item) => {
		let resp = await aiTTS({
			text: item.content,
			voice: "ava",
			speechRate: 0,
			volume: 50
		})
		
		if (innerAudioContext.value && resp.data) {
			innerAudioContext.value.autoplay = false
			innerAudioContext.value.src = resp.data.data.audioUrl
		}else{
			return
		}


		if (isPlay.value) {
			innerAudioContext.value.stop()
			isPlay.value = false
			return
		}
		innerAudioContext.value.onPlay(() => {
			isPlay.value = true
		});
		innerAudioContext.value.onStop(() => {
			isPlay.value = false
		})
		innerAudioContext.value.onError((res) => {
			isPlay.value = false
			innerAudioContext.value.pause();
			innerAudioContext.value.destroy()
			innerAudioContext.value = null
		});
		innerAudioContext.value.play()
	}
	onLoad((option) => {
		if(option.value){
			sendText.value=option.value
		}
		type.value = option.type
		userinfo.userId = uni.getStorageSync('user').id
		connectWs()
		
		setTimeout(()=>{
			 if(sendText.value){
				setTimeout(()=>{
					handleHotSend(sendText.value)
				},1200)
			 }
			// 
		},200)
		
		if(option.type==3){
			aiQuerys().then(res => {
				res.data.forEach((item) => {
					if(item.novelType == '1'){
						wordStyleState.list.push(item)
					}
					if(item.novelType == '2'){
						wordLengthState.list.push(item)
					}
				})
			})
		}
		
		// try {
		// 	aiHots().then(res => {
		// 		state.hots = res.data
				
		// 		setTimeout(()=>{
		// 			 userinfo.userId = uni.getStorageSync('user').id
		// 			connectWs()
		// 			if(sendText.value){
		// 				setTimeout(()=>{
		// 					handleHotSend(sendText.value)
		// 				},1200)
		// 			}
		// 		},200)
				
		// 	})
			
		// 	if(option.type==3){
		// 		aiQuerys().then(res => {
		// 			res.data.forEach((item) => {
		// 				if(item.novelType == '1'){
		// 					wordStyleState.list.push(item)
		// 				}
		// 				if(item.novelType == '2'){
		// 					wordLengthState.list.push(item)
		// 				}
		// 			})
		// 		})
		// 	}
			
		// } catch (error) {
		// 	//TODO handle the exception
		// }
		
	})
	onMounted(()=>{
		
	})
	onReady(() => {
		innerAudioContext.value = uni.createInnerAudioContext()
	})
	onUnload(() => {
		ws.off('status')
		ws.close()
	})
</script>
<style>
	page {
		background-color: #ffffff;
	}
</style>
<style lang="scss" scoped>
	
	.container {}

	.top {
		display: flex;
		flex-direction: column;

		.nav {
			display: flex;
			align-items: center;

			image {
				width: 193rpx;
				height: 47rpx;
			}
		}
		
		.hot-card{
			display: flex;
			flex-direction: column;
			padding: 30rpx;
			.hot-card-title{
				margin-bottom: 20rpx;
				font-weight: 400;
				font-size: 24rpx;
				color: rgba(19,28,37,0.5);
				line-height: 34rpx;
			}
			.hot-card-list{
				display: flex;
				flex-wrap: wrap;
				width: 750rpx;
				.hot-card-item{
					max-width: 600rpx;
					min-width: 100rpx;
					// box-sizing: border-box;
					padding: 20rpx 15rpx;
					margin-bottom: 20rpx;
					margin-right: 20rpx;
					display: flex;
					justify-content: flex-start;
					align-items: center;
					border-radius: 20rpx 20rpx 20rpx 20rpx;
					border: 1rpx solid rgba(19,28,37,0.5);
					text{
						font-weight: 400;
						font-size: 24rpx;
						color: #000000;
						line-height: 34rpx;
					}
				}
			}
		}
	}

	.item {
		position: relative;
		padding: 15rpx;
	}

	.word-choice {
		display: flex;
		flex-direction: column;
		padding: 30rpx;

		.word-choice-top {
			display: flex;
			flex-direction: column;

			.word-choice-wordchoice {
				display: flex;
				align-items: center;
				justify-content: space-between;

				text {
					font-weight: 500;
					font-size: 36rpx;
					color: #0F172B;
					line-height: 50rpx;
				}
			}

			.word-choice-search {
				margin-top: 20rpx;
			}

			.word-choice-subsection {
				margin-top: 20rpx;
			}
		}

		.word-choice-item {
			display: flex;
			flex-direction: column;
			padding: 30rpx 0;
			border-bottom: 1rpx solid rgba(19, 28, 37, 0.08);

			.word-choice-item-translation {
				text {
					font-weight: 400;
					font-size: 24rpx;
					color: rgba(19, 28, 37, 0.5);
					line-height: 34rpx;
				}
			}

			.word-choice-item-title {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.word-choice-item-title-actions {
					display: flex;
					align-items: center;
				}

				&-name {
					font-weight: 500;
					font-size: 32rpx;
					color: #000000;
					line-height: 45rpx;
				}

				&-action {
					display: flex;
					justify-content: center;
					align-items: center;
					padding: 10rpx 30rpx;
					border-radius: 100rpx 100rpx 100rpx 100rpx;
				}

				&-action-active {
					background: rgba(253, 47, 85, 0.1);

					text {
						font-weight: 400;
						font-size: 24rpx;
						color: #FD2F55;
						line-height: 34rpx;
					}
				}

				&-action-no {
					background: #FD2F55;

					text {
						font-weight: 400;
						font-size: 24rpx;
						color: #000000;
						line-height: 34rpx;
					}
				}
			}

			.word-choice-item-tip {
				font-weight: 400;
				font-size: 22rpx;
				color: rgba(19, 28, 37, 0.5);
				line-height: 31rpx;
			}

			.word-choice-item-title {
				font-weight: 400;
				font-size: 24rpx;
				color: rgba(19, 28, 37, 0.5);
				line-height: 34rpx;
			}

			.word-choice-item-tags {
				display: flex;
				flex-direction: row;
				align-items: center;
				flex-wrap: wrap;

				.word-choice-item-tags-item {
					border-radius: 100rpx 100rpx 100rpx 100rpx;
					border: 1rpx solid #000000;
					display: flx;
					justify-content: center;
					align-items: center;
					padding: 3rpx 15rpx;
					margin: 0 0 15rpx 10rpx;

					text {
						font-weight: 400;
						font-size: 24rpx;
						color: #000000;
						line-height: 34rpx;
					}
				}
			}
		}

		.word-choice-bottom {
			display: flex;
			flex-direction: column;

			.word-choice-tags {
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				align-items: center;

				.word-choice-tags-add {
					font-weight: 400;
					font-size: 24rpx;
					color: #000000;
					line-height: 34rpx;
					margin-bottom: 10rpx;
				}

				.word-choice-tags-list {
					display: flex;
					flex-direction: row;
					flex-wrap: wrap;
					align-items: center;
				}

				.word-choice-tags-item {
					background: rgba(253, 47, 85, 0.1);
					border-radius: 100rpx 100rpx 100rpx 100rpx;
					// border: 1rpx solid #FD2F55;
					padding:10rpx 15rpx;
					margin: 0 0 15rpx 10rpx;

					text {
						font-weight: 400;
						font-size: 24rpx;
						color: #FD2F55;
						line-height: 34rpx;
					}
				}
			}

			.word-choice-confirm {
				margin-top: 15rpx;
				height: 100rpx;
				background:#FD2F55;
				border-radius: 20rpx 20rpx 20rpx 20rpx;
				display: flex;
				justify-content: center;
				align-items: center;

				text {
					font-weight: 500;
					font-size: 32rpx;
					color: #fff;
					line-height: 45rpx;
				}
			}
		}
	}
</style>